<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>博文尚美</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
  <!-- 头部区域 -->
  <header class="header container">
    <!-- logo -->
    <div class="logo"><a><img src="./img/logo.png" alt="博文尚美"></a></div>
    <!-- 导航栏 -->
    <div class="nav">
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>PROTFOLIO</li>
        <li>SERVICE</li>
        <li>NEWS</li>
        <li>CONTACT </li>
      </ul>
    </div>
  </header>

  <!-- 主体区域 -->
  <main>
    <!-- 横幅 -->
    <div class="banner">
      <!-- 图片 -->
      <img src="./img/bg.png" alt="">
      <!-- 切换点 -->
      <ul>
        <li></li>
        <li class="activate"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 服务模块 -->
    <div class="service">
      <div class="our-service">
        <img src="./img/our-services.png" alt="服务范围">
      </div>
      <ul>
        <li><img src="./img/services-list.png" alt="web"></li>
        <li><img src="./img/services-list.png" alt="web"></li>
        <li><img src="./img/services-list.png" alt="web"></li>
        <li><img src="./img/services-list.png" alt="web"></li>
      </ul>
    </div>
    <!-- 客户案例 -->
    <div class="customerCase clearfix">
      <div class="cc-top container">
        <img src="./img/customerCase.png" alt="客户案例">
      </div>
      <!-- 展示图片 -->
      <ul class="container">
        <li><img src="./img/cc-bg.png" alt=""></li>
        <li><img src="./img/cc-bg.png" alt=""></li>
        <li><img src="./img/cc-bg.png" alt=""></li>
      </ul>
      <!-- 按钮 -->
      <div class="btn">VIEW MORE</div>
    </div>
    <!-- 最新资讯 -->
    <div class=" container">
      <div class="news-bg"><img src="./img/news.png" alt=""></div>
      <div class="news-list">
        <div class="l"><img src="./img/xs1.png" alt=""></div>
        <div class="r">
          <ul>
            <li>
              <div>
                <h3>网站排名进入前三的技巧说明</h3>
                <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br>首页，更不用说进首页前三了。那么网站优...</p>
              </div>
            </li>
            <li>
              <div>
                <h3>网站排名进入前三的技巧说明</h3>
                <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br>首页，更不用说进首页前三了。那么网站优...</p>
              </div>
            </li>
            <li>
              <div>
                <h3>网站排名进入前三的技巧说明</h3>
                <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br>首页，更不用说进首页前三了。那么网站优...</p>
              </div>
            </li>
            <li>
              <div>
                <h3>网站排名进入前三的技巧说明</h3>
                <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br>首页，更不用说进首页前三了。那么网站优...</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </main>
  <!-- 底部区域 -->
  <footer class="footer">
    <div class='container'>
      <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
      <p class="r">Home | About | Portfolio | Contact</p>
    </div>
  </footer>
</body>

</html>